<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main{
				border-radius: 50%;
				border: 1px solid red;
				width: 30px;
				height: 30px;
				background-color: red;
				margin: 0px auto;
			}
			.f1-main{
				border-radius: 50%;
				
				padding-top: 5px;
				width: 45px;
				height: 40px;								
				margin: 0 auto;
				 animation-iteration-count: infinite;
				 animation-name: Deepening;
				 animation-duration: 2s;
			}
			.f2-main{
				border-radius: 50%;
			
				padding-top: 5px;
				padding-bottom: 5px;
				padding-right: 2px;
				width: 63px;
				height: 60px;	
				animation-name: Lighten;
				animation-duration: 2s;
				 animation-iteration-count: infinite;
			}
			/* bord颜色变深再变浅 */
			@keyframes Deepening {
			  0%{border: 1px solid mintcream;}
			  99% {border: 10px solid pink;}
			  100%{border: 1px solid mintcream;}
			}
			/* bord颜色变浅 */
			@keyframes Lighten {
			  0% {border: 1px solid mintcream;}
			  100% {border: 10px solid pink;}
			 
			}
		</style>
	</head>
	<body>
		<div class="f2-main">
		<div class="f1-main">
			<div class="main">
			
			</div>
		</div>
		</div>
	</body>
</html>
